<template>
	<view class="page">
		<view class="message-list">
			<!-- 在线客服 -->
			<view class="message-item" @click="navigateToDetail('customer')">
				<view class="message-icon cs-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#8A7DFF">
						<path d="M12,2C6.5,2,2,6.5,2,12c0,1.5,0.3,3,0.9,4.3c0.1,0.3,0.1,0.6,0,0.8l-0.9,3c-0.2,0.8,0.5,1.5,1.3,1.3l3-0.9 c0.3-0.1,0.6-0.1,0.8,0C8.9,21.4,10.5,22,12,22c5.5,0,10-4.5,10-10S17.5,2,12,2z M8,13c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1 S8.6,13,8,13z M12,13c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1S12.6,13,12,13z M16,13c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1 S16.6,13,16,13z"/>
					</svg>
				</view>
				<view class="message-content">
					<view class="message-title">在线客服</view>
					<view class="message-desc">查看与客服沟通记录</view>
				</view>
				<view class="message-arrow">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#CCCCCC">
						<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
					</svg>
				</view>
			</view>

			<!-- 活动消息 -->
			<view class="message-item" @click="navigateToDetail('activity')">
				<view class="message-icon activity-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#8A7DFF">
						<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"/>
					</svg>
					<view class="badge">3</view>
				</view>
				<view class="message-content">
					<view class="message-title">活动消息</view>
					<view class="message-desc">冬季护肤新品预售，全场5折......</view>
				</view>
				<view class="message-arrow">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#CCCCCC">
						<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
					</svg>
				</view>
			</view>

			<!-- 物流消息 -->
			<view class="message-item" @click="navigateToDetail('logistics')">
				<view class="message-icon logistics-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#8A7DFF">
						<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
					</svg>
					<view class="badge">2</view>
				</view>
				<view class="message-content">
					<view class="message-title">物流消息</view>
					<view class="message-desc">您的商品已发货！到货后请检查好商品无误......</view>
				</view>
				<view class="message-arrow">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#CCCCCC">
						<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
					</svg>
				</view>
			</view>

			<!-- 通知消息 -->
			<view class="message-item" @click="navigateToDetail('notification')">
				<view class="message-icon notification-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#8A7DFF">
						<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
					</svg>
				</view>
				<view class="message-content">
					<view class="message-title">通知消息</view>
					<view class="message-desc">您的优惠券即将过期，请及时使用......</view>
				</view>
				<view class="message-arrow">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#CCCCCC">
						<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
					</svg>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
function navigateToDetail(type) {

	if (type === 'customer') {
		uni.navigateTo({
			url: `/pages/message/detail?type=${type}`
		});
	}
	else if (type === 'activity') {
		uni.navigateTo({
			url: `/pages/message/activity`
		});
	}
	else if (type === 'logistics') {	
		uni.navigateTo({
			url: `/pages/message/logistics`
		});
	}
	else if (type === 'notification') {
		uni.navigateTo({	
			url: `/pages/message/notice`
		});
	}
	else {
		uni.navigateTo({
			url: `/pages/message/detail?type=${type}`
		});
	}
}
</script>

<style>
.page {
	width: 100vw;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.message-list {
	padding: 10rpx 0;
}

.message-item {
	display: flex;
	align-items: center;
	padding: 30rpx 40rpx;
	background-color: #ffffff;
	margin-bottom: 2rpx;
	position: relative;
}

.message-item:after {
	content: '';
	position: absolute;
	left: 40rpx;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: #f5f5f5;
}

.message-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #eeeaff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.badge {
	position: absolute;
	top: -6rpx;
	right: -6rpx;
	background-color: #ff5757;
	color: #ffffff;
	font-size: 24rpx;
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.message-content {
	flex: 1;
	margin-left: 30rpx;
}

.message-title {
	font-size: 32rpx;
	color: #333333;
	margin-bottom: 10rpx;
}

.message-desc {
	font-size: 24rpx;
	color: #999999;
}

.message-arrow {
	width: 36rpx;
	height: 36rpx;
}
</style>
